<!--
 * @Author: Mcc
 * @Date: 2024-08-12 15:04:16
 * @LastEditors: mcc 550539422@qq.com
 * @LastEditTime: 2024-08-22 17:46:17
 * @FilePath: \ft-apply\src\view\Share.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->
<template>
    <div id="Share">
        <img src="../assets/ui/img/Share.png" alt="">
        <div class="save_btn" @click="saveImage">保存本地</div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ShareImage from '../assets/ui/img/Share.png'; // 导入图片
const saveImage = async () => {
    const imageUrl = ShareImage; // 替换为你的图片地址
    try {
        const response = await fetch(imageUrl);
        const blob = await response.blob();
        const objectUrl = URL.createObjectURL(blob);
        // 创建一个链接元素
        const link = document.createElement('a');
        if (link.download !== undefined) { // 支持下载属性
            link.href = objectUrl;
            link.download = '方田分享.jpg'; // 可以设置下载文件名
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        } else {
            navigator.msSaveBlob(blob, '方田分享.jpg'); // 兼容IE
        }
        URL.revokeObjectURL(objectUrl); // 释放内存
    } catch (error) {
        console.error('保存图片失败:', error);
    }
};
</script>

<style lang="less" scoped>
#Share {
    width: 100vw;
    height: calc(100vh);
    background: #F5F7FB;
    overflow: hidden;
    display: flex;
    align-items: center;
    //justify-content: center;
    flex-direction: column;
    box-sizing: border-box;
    padding: 70px 25px;

    img {
        width: 100%;
    }
}

.save_btn {
    margin-top: 60px;
    width: 100%;
    background: #209EE4;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    font-size: 28rpx;
    font-weight: 500;
    height: 50px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
}
</style>